<template>
  <div>
    <V-CommonHeaderLeft>
      <div class="valet">
        <navigation :msg='navMsg'></navigation>
        <div class="valet-index">
          <div>
            <span class="text-status">*</span>
            <span class="title">客户</span>
            <el-select filterable
                       placeholder="请选择客户"
                       style="width: 510px;"
                       v-model="valueName">
              <el-option v-for="item in client"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
              <div class="add-newClient">
                  <span>新增乘客</span>
                  <span class="icon-test182"></span>
              </div>
            </el-select>
          </div>
          <div class="order-list">
            <h4>订货清单</h4>
            <div class="order-table">
              <table>
                <tr class="order-th">
                  <th>序号</th>
                  <th>规格图</th>
                  <th>商品名称/商品编号</th>
                  <th>规格名称/规格编号</th>
                  <th>单位</th>
                  <th>*数量</th>
                  <th>*单价</th>
                  <th>小计</th>
                  <th>备注</th>
                </tr>
              </table>
              <div class="detail-center">
                <div class="add-list"><a href="">+添加订货清单</a></div>
                <div class="add-right"><span>+添加赠品</span></div>
                <div class="add-detail">
                  <div class="detail-name">
                    <ul>
                      <li><span>（总数量：0）</span>商品总额：</li>
                      <li><span>（0.00m³ 0.00kg ）</span>运费：</li>
                      <li>订单总额：</li>
                      <li>
                        <el-checkbox class="checkbox" v-model="checked"></el-checkbox>订单特批价：
                      </li>
                    </ul>
                  </div>
                  <div class="detail-more">
                    <ul>
                      <li>￥0.00</li>
                      <li><el-input v-model="input" class="el-input--mini" value="0" placeholder=""></el-input></li>
                      <li>￥0.00</li>
                      <li><el-input :disabled="disabled" class="el-input--mini" placeholder="请输入订单特批价"></el-input></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="client-info">
              <div class="take-way">
                <label for="">配送方式</label>
                <el-select v-model="valuesType" class="el-input--medium" placeholder="请选择配送方式">
                  <el-option
                    v-for="item in ranges"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="address">
                <label for="">收货地址</label>
                <span class="icon-test194 add-style"><span class="add-address">添加收货地址</span></span>
              </div>
              <div class="sub-time">
                <label for="">交货日期</label>
                <el-date-picker
                  class="el-input--medium"
                  v-model="valueDate"
                  type="datetime"
                  placeholder="请输入交货日期">
                </el-date-picker>
              </div>
              <div class="invoice-type">
                <label for="">发票类型</label>
                <el-select v-model="valuesFp" class="el-input--medium" placeholder="无需发票">
                  <el-option
                    v-for="item in invoice"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <div class="add-invoice">
                  <span class="icon-test194 add-style"><span class="add-address">添加发票信息</span></span>
                </div>
              </div>
              <div class="tips">
                <label for="">备注说明</label>
                <el-input type="text" v-model="text" class="el-input--medium"
                          maxlength="500" show-word-limit placeholder="填写一些说明吧"></el-input>
              </div>
              <div class="annex">
                <label for="">附件信息</label>
                <span class="icon-test401">添加附件</span>
                <span>（单个附件最大支持10M，支持格式：jpg、jpeg、png）</span>
              </div>
            </div>
          </div>
        </div>
        <div class="fix-btn">
          <button><span class="icon-test211">取消</span></button>
          <button><span class="icon-test129">保存</span></button>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import Navigation from '@/components/common/navigation/Navigation'

export default {
  data () {
    return {
      valueName: '',
      values: '',
      valuesFp: '',
      valueDate: '',
      valuesType: '',
      checked: false,
      disabled: true,
      input: 0,
      text: '',
      num: 2,
      // tableHeight: window.innerHeight - 170,
      // 导航
      navMsg: [
        {
          name: '订单',
          path: '/orders'
        }, {
          name: '新增订货单',
          path: '/valetOrder'
        }
      ],
      // 客户
      client: [
        {
          value: '1',
          label: '民治店1'
        },
        {
          value: '2',
          label: '民治店2'
        },
        {
          value: '3',
          label: '民治店3'
        },
        {
          value: '4',
          label: '民治店4'
        },
        {
          value: '5',
          label: '民治店5'
        },
        {
          value: '6',
          label: '民治店6'
        },
        {
          value: '7',
          label: '民治店7'
        },
        {
          value: '8',
          label: '民治店8'
        }
      ],
      // 配送方式
      ranges: [
        {
          value: '1',
          label: '送货上门'
        },
        {
          value: '2',
          label: '物流货运'
        },
        {
          value: '3',
          label: '其他'
        }
      ],
      // 发票
      invoice: [
        {
          value: '1',
          label: '无需发票'
        },
        {
          value: '2',
          label: '增值税普通发票（商品含税，5%）'
        },
        {
          value: '3',
          label: '增值税专用发票（商品含税，10%）'
        },
        {
          value: '4',
          label: '增值税专用发票（商品含税，10%）'
        }
      ],
      // 时间
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  methods: {

  },
  created () {
  },
  mounted () {
  },
  components: {
    VCommonHeaderLeft,
    Navigation
  }
}
</script>

<style lang="scss" scoped>
.valet {
  width: 100%;
  overflow: hidden;
  margin-right: 10px;
  .valet-index {
    height: 495px;
    padding: 1.5rem;
    background-color: #fff;
    overflow: scroll;
    overflow-x: hidden;
    .text-status{
      padding-left: 1rem;
      color: #f00;
    }
    .title{
      font-size: 12px;
      margin-right: 1rem;
    }
    .order-list{
      h4{
        border-left: 2px solid #000;
        padding-left: .5rem;
        margin: 1rem 0 .5rem 0;
      }
      .order-table{
        border: 1px solid rgb(227, 227, 227);
        table{
          width: 100%;
          border-collapse: collapse;
        }
        table tr{
          height: 50px;
          border-bottom: 1px solid rgb(227, 227, 227);
          text-align: center;
        }
        .order-th{
          display: flex;
          justify-content: space-between;
          width: 100%;
          align-items: center;
          background-color: #fcfcfc;
          th{
            width: 100px;
            font-size: .8rem;
            color: #666;
            font-weight: 200;
          }
          th:nth-child(3),
          th:nth-child(4){
            width: 200px;
          }
        }
        .detail-center {
          .add-list, .add-right {
            font-size: 12px;
            border-bottom: 1px solid rgb(227, 227, 227);
          }

          .add-list {
            height: 50px;
            text-align: center;
            font-weight: bold;
            line-height: 50px;

            a {
              color: #20ade5;
            }
          }

          .add-right {
            height: 32px;
            color: #666;
            line-height: 32px;
            text-align: right;

            span {
              padding-right: 1rem;
            }
          }

          .add-detail {
            display: flex;
            justify-content: space-between;
            padding: 1rem;
            font-size: 12px;

            .detail-name {
              width: 88%;
              text-align: right;
              line-height: 40px;

              ul li span {
                color: #999;
              }

              .checkbox {
                padding-right: 10px;
              }
            }

            .detail-more {
              text-align: right;
              line-height: 40px;

              ul li:nth-child(2).el-input--mini {
                text-align: right;
              }

              ul li:nth-child(3) {
                font-size: 18px;
              }

              ul li .el-input--mini {
                width: 140px;
              }
            }
          }
        }
      }
      .client-info{
        margin-top: 1rem;
        padding: 5px 20px;
        line-height: 40px;
        .address .add-style{
          color: #333;
          font-size: 12px;
        }
        .address span span:hover{
          color: #20ade5;
        }
        div label{
          padding-right: 1rem;
          font-size: 12px;
          color: #666;
        }
        div .el-input--medium{
          width: 535px;
        }
        .invoice-type {
          .add-invoice{
            margin-left: 4rem;
            span{
              font-size: 12px;
              color: #333;
            }
            .add-address:hover{
              color: #20ade5;
            }
          }
        }
        .annex{
          span{
            font-size: 12px;
            color: #333;
          }
          span:nth-child(2){
            padding-left: 5px;
          }
          span:nth-child(2):hover{
            color: #20ade5;
          }
        }
      }
    }
  }
  .fix-btn{
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    padding: 10px 24px;
    font-size: 16px;
    text-align: right;
    border-top: 1px solid rgb(227, 227, 227);
    button{
      width: 150px;
      height: 40px;
      span{
        letter-spacing: 3px;
      }
    }
    button{
      background-color: #ffffff;
      border: 1px solid #20ade5;
    }
    button:first-child{
      margin-right: 1rem;
      color: #20ade5;
    }
    button:last-child{
      background-color: #20ade5;
      border: 1px solid #20ade5;
      span{
        color: #fff;
      }
    }
  }

}
</style>
